<template>
  <div class="muenBtm">
        <div class="d1"><img src="@/assets/2.jpg" /></div>
        <div class="d2">GYTHD20</div>
        <div class="d3">在线</div>
        <div class="d4">
          <p style="width: 50%;"></p>
        </div>
        <div class="d5">已使用 11.29GB/<span>1.79</span></div>
      </div>
</template>
<script>
export default {
  data() {
    return {
    
    };
  },
  mounted() {},
  methods: {
   
  },
};
</script>
<style lang="less" scoped>
.muenBtm {
  text-align: left;
  padding-left: 8px;
  position: absolute;
  bottom: 14px;
  line-height: 1.6;
  .d1 {
    img{
      width: 100px !important;
    height: 70px !important;
    border-radius: 5px;
    }
  }
  .d2 {
    color: rgba(16, 16, 16, 1);
    font-size: 16px;
    
  }
  .d3{
    color: rgba(24, 144, 255, 1);
    font-size: 12px;
    margin-bottom: 20px;
  }
  .d4 {
    width: 111px;
    height: 6px;
    line-height: 20px;
    border-radius: 25px;
    margin-bottom: 4px;
    background-color: rgba(224, 227, 234, 1);
    p {
      height: 6px;
      line-height: 20px;
      border-radius: 25px;
      background-color: rgba(56, 148, 255, 1);
    }
  }
  .d5{
    color: rgba(16, 16, 16, 1);
    font-size: 12px;
    span{
      color: rgba(24, 144, 255, 1) !important;
    }
  }
}
</style>
